<template>
  <!-- 任务考核结果 -->
  <div>
    <div class="header">
      <el-form ref="form"  :model="form" label-width="80px">
        <el-form-item label="统计维度">
          <el-select v-model="form.statistics" placeholder="请选择统计维度">
            <el-option label="2022员工考核体系-非银" value="0"></el-option>
            <el-option label="2022员工考核体系-银行" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据日期">
           <el-date-picker
              v-model="form.date"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="员工名称">
          <el-input v-model="form.name" placeholder="请输入员工名称"></el-input>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-select v-model="form.type" placeholder="请选择业务类型">
            <el-option label="2022员工考核体系-非银" value="0"></el-option>
            <el-option label="2022员工考核体系-银行" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btns">
        <div></div>
        <div>
          <el-button class="btn">查询</el-button>
          <el-button class="btn">重置</el-button>
        </div>
      </div>
    </div>
    <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column  label="单位：亿元" align="center">
            <el-table-column prop="name" label="员工名称" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column  label="资产业务" align="center">
            <el-table-column prop="NCD" label="NCD/同业存款投资"  align="center">
            </el-table-column>
            <el-table-column prop="finance" label="同业理财投资" align="center">
            </el-table-column>
            <el-table-column prop="ABS" label="ABS/ABN投资"  align="center">
            </el-table-column>
            <el-table-column prop="Yinden" label="银登ABS投资"  align="center">
            </el-table-column>
            <el-table-column prop="cash" label="非银机构现金管理类投资"  align="center">
            </el-table-column>
          </el-table-column>
        </el-table>
    </div>
    <div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
      >
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      form:{
        name:'',
        system:'',
        period:'',
      },
       total: 0,
      tableData:[
        {
          name:'陈思',
          NCD:'3.8',
          finance:'2.8',
          ABS:'-',
          Yinden:'-',
          cash:'-',
        },
        {
          name:'陈思',
          NCD:'3.8',
          finance:'2.8',
          ABS:'-',
          Yinden:'-',
          cash:'-',
        },
        {
          name:'陈思',
          NCD:'3.8',
          finance:'2.8',
          ABS:'-',
          Yinden:'-',
          cash:'-',
        },
        {
          name:'陈思',
          NCD:'3.8',
          finance:'2.8',
          ABS:'-',
          Yinden:'-',
          cash:'-',
        },
        
      ],
    }
  },
  methods:{
    pageFn(){
      //
    }
  }

}
</script>

<style lang="scss" scoped>
  .header {
    padding: 10px;
  }
  .table {
    background: #262d47;
    padding: 10px;
    margin-top: 10px;
  }
  .btns {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  ::v-deep {
    .header {
      background: #262d47;

      .el-form {
        display: flex;
      }
    }
    .addForm {
      .el-form .el-form-item .el-form-item__content .el-input__inner.el-input__inner{
        width: 300px;
      }
    }
    .el-table {
      min-height: 440px;
    }
    .el-table th.el-table__cell {
      background-color: #1c2238 ;
      color: #fff ;
    }
    .el-table thead.is-group th.el-table__cell {
      background-color: #1c2238 ;
      color: #fff ;
    }
    .el-table .el-table__body-wrapper .el-table__body .el-table__row td, .el-table .el-table__fixed-body-wrapper .el-table__body .el-table__row td {
      border: none;
    }
    .el-pagination {
      text-align: right;
    }
  }
</style>